<script>
import {defineComponent} from "vue";
import {FontAwesomeIcon as Fai} from "@fortawesome/vue-fontawesome";
import SideIconMenu from "../components/SideIconMenu.vue";
import ChatEntranceItem from "../components/ChatEtranceItem.vue";
import ChatLogItem from "../components/ChatLogItem.vue";
import AppIcon from '../assets/images/final-logo.png'
export default defineComponent({
  components: {ChatLogItem,ChatEntranceItem, SideIconMenu, Fai},
  data() {
    return {
      AppIcon,
      message: '',
      username: 'مىرزاتجان',
      messages: [{
        text:'Hello World',
        incoming: true,
        timestamp: Date.now(),
      }],
    }
  },
  methods: {
    onMenuChange(menuName) {
      console.log(menuName);
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.chatLogContainer;
        container.scrollTop = container.scrollHeight + 60;
      })
    },
    onKeyDown(event) {
      if(event.key === 'Enter' && event.ctrlKey) {
        event.preventDefault();
        let cursorPosition = event.target.selectionStart;
        let beforeCursor = this.message.substring(0, cursorPosition);
        let afterCursor = this.message.substring(cursorPosition);
        this.message = `${beforeCursor}\n${afterCursor}`;
      } else if(event.key === 'Enter') {
        event.preventDefault();
        this.messages.push({
          incoming: false,
          text: this.message,
          timestamp: Date.now(),
        })
        this.message = ''
        this.scrollToBottom();
      }
    },
  },
  mounted() {
    this.scrollToBottom()
  }
})
</script>

<template>
  <div class="absolute w-full h-full bg-gray-400 flex">
    <div class="flex-1 bg-gray-700 flex flex-col">
      <div class="w-full h-[50px] bg-gray-700 drag cursor-pointer flex border-b border-gray-600">
        <div class="flex-1  flex justify-end items-center text-white pr-5">{{username}}</div>
        <div class="ml-auto font-sans flex justify-center items-center w-[300px] border-l border-gray-600">
          <div class="h-[30px] bg-gray-600 flex justify-center items-center pl-2 rounded text-[0.8em] text-gray-500 no-drag">
            <fai icon="magnifying-glass" />
            <input type="text" class="h-[30px] bg-gray-600 rounded-r text-[0.9em] px-2 text-white outline-none">
          </div>
        </div>
      </div>
      <div class="flex h-[calc(100%-50px)]">
        <div class="flex-1 flex flex-col bg-gray-700">
          <div class="flex-1 overflow-y-auto scrollbar-thin py-2 scrollbar-track-gray-700 scrollbar-thumb-gray-800" ref="chatLogContainer">
            <ChatLogItem v-for="(msg, idx) in messages" :key="idx" :msg="msg" />
          </div>
          <div class="h-[200px] border-t border-gray-600">
            <div class="h-[40px] text-gray-400 flex justify-end items-center select-none">
              <div class="w-[30px] flex justify-center h-[30px] items-center cursor-pointer">
                <fai icon="emoji" class="active:text-white"/>
              </div>
              <div class="w-[30px] flex justify-center h-[30px] items-center cursor-pointer">
                <fai icon="folder" class="active:text-white"/>
              </div>
            </div>
            <textarea v-model="message" @keydown="onKeyDown" class="text-right w-full h-[calc(100%-50px)] selection:bg-green-500 resize-none bg-gray-700 p-2 text-white outline-none scrollbar-thin scrollbar-track-gray-700 scrollbar-thumb-gray-800"/>
          </div>
        </div>
        <div class="w-[300px] h-full border-l border-gray-600 ml-auto relative">
          <div class="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-gray-800 scrollbar-track-gray-700">
            <ChatEntranceItem
                :icon="AppIcon"
                name="پاراڭ تېخنىكا گورۇپپىسى"
                chat="سىز نىمە قىلىۋاتىسىز ؟ مەن بارايمۇ؟"
                chat-date="2024/07/01"
                v-for="i in 15"
                :key="i"
            />
          </div>
        </div>
      </div>
    </div>
    <SideIconMenu @menu-changed="onMenuChange" class="cursor-pointer select-none"/>
  </div>
</template>

<style scoped></style>